<template>
  <div>
    <el-card>
      <el-table :data="tableList">
        <el-table-column type="expand">
          <template #default="{ row }">
            <div class="flex">
              <el-avatar :size="40" :src="row.user.avatar">
                <img
                  src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
                />
              </el-avatar>
              <div class="ml-5">
                <h6>{{ row.user.username }}</h6>
                <h5>{{ row.review.data }}</h5>
                <img
                  :src="item"
                  v-for="item in row.review.image"
                  alt=""
                  style="width: 200px; height: 200px"
                />
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="ID" width="100px"></el-table-column>
        <el-table-column prop="title" label="商品">
          <template #default="{ row }">
            <div class="flex">
              <el-avatar :size="40" :src="row.goods_item.cover" >
                <img
                  src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
                />
              </el-avatar>
              <div class="ml-5">
                <h6>{{ row.goods_item.title }}</h6>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="评价信息">
          <template #default="{ row }">
            <p>用户：{{ row.user.username }}</p>
            <p><el-rate v-model="row.rating" />{{ row.rating }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="评价时间" width="280">
        </el-table-column>
        <el-table-column label="是否显示">
          <template #default="{ row }">
            <el-switch
              v-model="row.status"
              @change="statusChange(row)"
              :active-value="1"
              :inactive-value="0"
            />
          </template>
        </el-table-column>
      </el-table>
      <div class="flex items-center justify-center mt-3">
        <el-pagination
          background
          layout="prev, pager,next"
          :total="total"
          :current-page="page"
          :page-size="limit"
          @current-change="changePage"
        />
      </div>
    </el-card>

    <Drawer
      ref="DrawerRef"
      :title="title === 'add' ? '添加公告' : '修改公告'"
      @submit="submit"
    >
      <el-form
        ref="formRef"
        :model="fromData"
        label-width="100px"
        :rules="rules"
      >
        <el-form-item label="公告标题" prop="title">
          <el-input v-model="fromData.title" placeholder="请输入公告标题" />
        </el-form-item>
        <el-form-item label="公告内容" prop="content">
          <el-input
            v-model="fromData.content"
            placeholder="请输入公告内容"
            type="textarea"
          ></el-input>
        </el-form-item>
      </el-form>
    </Drawer>
  </div>
</template>

<script setup>
import Drawer from "@/components/Drawer/index.vue";
import { getCommentList, changeStatus, review } from "@/api/comment";
import { useInitTable, useInitForm } from "@/composables/useCommon.js";
const {
  tableList,
  page,
  total,
  limit,
  getData,
  changePage,
  handleDelete,
  statusChange,
} = useInitTable({
  getList: getCommentList,
  status: changeStatus,
});

const {
  fromData,
  title,
  formRef,
  rules,
  DrawerRef,
  createClick,
  submit,
  editNoticeClick,
} = useInitForm({
  fromData: {
    title: "",
    content: "",
  },
  getData: getData,
  rules: {},
});
</script>
